<template>
  <div>
    <el-card class="box-card">
      <el-form ref="form" :model="form" label-width="80px">
        <div style="display: flex">
          <el-form-item label="标签名称">
            <el-input v-model="form.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="城市">
            <el-select v-model="form.province" placeholder="请选择">
              <el-option label="上海" value="shanghai" />
              <el-option label="北京" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="地区">
            <el-select v-model="form.city" placeholder="请选择">
              <el-option label="上海区" value="shanghai" />
              <el-option label="北京区" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input v-model="form.shortName" />
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="状态">
            <el-select v-model="form.state" placeholder="请选择">
              <el-option label="启用" value="1" />
              <el-option label="禁用" value="0" />
            </el-select>
          </el-form-item>
          <el-button style="margin-left: 40px; height: 40px" @click="search()">
            搜索
          </el-button>
          <el-button
            style="margin-left: 10px; height: 40px"
            type="primary"
            @click="del()"
            >清除</el-button
          >
          <el-button
            type="success"
            class="addgreen"
            @click="openAddUserDialog()"
          >
            <i class="el-icon-edit" />
            新增用户
          </el-button>
        </div>
      </el-form>
      <el-alert
        :title="`共${titletotal}条记录`"
        type="info"
        :closable="false"
        show-icon
      />
      <el-table :data="list" class="eltable">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="number" label="企业编号" />
        <el-table-column prop="shortName" label="企业简称" />
        <el-table-column prop="tags" label="标签" />
        <el-table-column prop="creatorID" label="创建者" />
        <el-table-column prop="addDate" label="创建日期" />
        <el-table-column prop="remarks" label="备注" />
        <el-table-column prop="state" label="状态">
          <template #default="{ row }">
            <span>{{ row.state === 0 ? '禁用' : '启用' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="200">
          <template #default="{ row }">
            <el-button
              type="primary"
              plain
              circle
              @click="editCompanyDetail(row.id)"
            >
              <i class="el-icon-edit" />
            </el-button>
            <el-button v-if="row.state === 1" type="warning" plain circle>
              <i
                class="el-icon-close"
                @click="updateCompanyState(row.id, row.state)"
              />
            </el-button>
            <el-button v-else type="success" plain circle>
              <i
                class="el-icon-check"
                @click="updateCompanyState(row.id, row.state)"
              />
            </el-button>
            <el-button type="danger" plain circle>
              <i class="el-icon-delete" @click="delCompanyDetail(row.id)" />
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :current-page="page"
          :page-sizes="[2, 5, 10, 15]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      @close="closeAddUserDialog()"
    >
      <el-form :model="addUserForm">
        <el-form-item label="企业名称" :label-width="formLabelWidth">
          <el-input v-model="addUserForm.shortName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="所属公司" :label-width="formLabelWidth">
          <el-input v-model="addUserForm.company" autocomplete="off" />
        </el-form-item>
        <div class="wangzhan">
          https://www.tianyancha.com （在此可查询所属公司全称及简称）
        </div>
        <el-form-item label="城市地区" :label-width="formLabelWidth">
          <el-select
            v-model="addUserForm.province"
            placeholder="请选择活动区域"
          >
            <el-option label="上海" value="shanghai" />
            <el-option label="北京" value="beijing" />
          </el-select>
          <el-select
            v-model="addUserForm.city"
            style="margin-left: 20px"
            placeholder="请选择活动区域"
          >
            <el-option label="上海区" value="shanghai" />
            <el-option label="北京区" value="beijing" />
          </el-select>
        </el-form-item>

        <el-form-item label="方向（企业标签）" :label-width="formLabelWidth">
          <el-input v-model="addUserForm.tags" autocomplete="off" />
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            v-model="addUserForm.remarks"
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAddUserDialog()">取 消</el-button>
        <el-button type="primary" @click="submitAddCompany()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getcompanyListApi,
  addcompanyApi,
  companyDetailsApi,
  editcompanyApi,
  delcompanyApi,
  updateCompanyStateApi,
  searchcompanyListApi
} from '@/api/business'
export default {
  components: {},
  props: {},
  data() {
    return {
      form: {
        name: '',
        province: '',
        city: '',
        shortName: '',
        state: '1'
        // 启用状态
      },
      title: '',
      titletotal: '',
      list: [],
      page: 1,
      pageSize: 5,
      total: 0,
      //   新增用户弹层
      dialogTableVisible: false,
      dialogFormVisible: false,
      addUserForm: {
        shortName: '',
        company: '',
        province: '',
        city: '',
        type: [],
        tags: '',
        remarks: '',
        id: ''
      },
      formLabelWidth: '130px'
    }
  },
  computed: {},
  watch: {},
  async created() {
    this.getcompanyList()
  },

  mounted() {},
  methods: {
    async getcompanyList() {
      const res = await getcompanyListApi(this.page, this.pageSize)
      console.log(res)
      this.list = res.items
      this.total = res.counts
      this.titletotal = res.counts
    },
    handleSizeChange(val) {
      this.page = 1
      this.pageSize = val
      this.getcompanyList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getcompanyList()
      console.log(val)
    },
    closeAddUserDialog() {
      this.dialogFormVisible = false
      this.addUserForm = {
        shortName: '',
        company: '',
        province: '',
        city: '',
        type: [],
        tags: '',
        remarks: ''
      }
    },
    openAddUserDialog() {
      this.dialogFormVisible = true
      this.title = '新增管理'
    },
    submitAddCompany() {
      this.addUserForm.isFamous = false
      if (this.addUserForm.id) {
        editcompanyApi(this.addUserForm)
        this.$message.success('编辑成功')
      } else {
        addcompanyApi(this.addUserForm)
        this.$message.success('增加成功')
        this.addUserForm = {
          shortName: '',
          company: '',
          province: '',
          city: '',
          type: [],
          tags: '',
          remarks: ''
        }
      }
      this.dialogFormVisible = false
      this.getcompanyList()
    },
    async editCompanyDetail(id) {
      this.dialogFormVisible = true
      const res = await companyDetailsApi(id)
      this.addUserForm = res
      this.title = '修改管理'
    },
    delCompanyDetail(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delcompanyApi(id)
          this.getcompanyList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    updateCompanyState(id, state) {
      let status = 0
      if (state === 1) {
        status = 0
      } else {
        status = 1
      }
      this.$confirm('此操作将改变状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          updateCompanyStateApi(id, status).then((res) => {
            this.getcompanyList()
            this.$message({
              type: 'success',
              message: '更改成功!'
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消更改'
          })
        })
    },
    async search() {
      console.log(this.form)
      // console.log(this.list);
      const res = await searchcompanyListApi(this.form)
      console.log(res)
      this.list = res.items
      this.total = res.counts
    },
    del() {
      this.form = {
        name: '',
        province: '',
        city: '',
        shortName: '',
        state: ''
        // 启用状态
      }
    }
  }
}
</script>
<style scoped>
.addgreen {
  height: 40px;
}
.block {
  float: right;
  margin: 20px 0;
}
.eltable {
  width: 100%;
  margin-top: 25px;
}
::v-deep .el-dialog__header {
  background-color: #409eff;
}
::v-deep .el-dialog__title {
  color: #fff;
}
::v-deep .el-dialog__headerbtn .el-icon-close:before {
  color: #fff;
}
::v-deep .el-dialog__body {
  padding: 50px 100px 50px 40px;
}
.dialog-footer {
  text-align: center;
}

.wangzhan {
  margin-bottom: 20px;
  /* margin-left: 50px; */
  text-align: center;
}
</style>
